import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

export interface Item {
  name?: string;
  active?: boolean;
  disabled?: boolean;
}

export interface IMenuProps {
  className?: string;
  children?: React.ReactNode;
  small?: boolean;
  large?: boolean;
  items?: Item[];
  renderItem?: () => void;
  onClick?: (item: Item, index: number | null) => void;
}
export interface IMenuState {
  items?: Item[];
  onClick?: () => void;
}
export class Menu extends React.PureComponent<IMenuProps, {}, any> {
  public static propTypes = {
    className: PropTypes.string,
    children: PropTypes.node,
    small: PropTypes.bool,
    large: PropTypes.bool,
    renderItem: PropTypes.func,
  };
  constructor(props: IMenuProps) {
    super(props);
    this.renderItem = this.renderItem.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.state = { items: this.props.items };
  }

  public handleClick(item: Item, index: number) {
    if (this.props.onClick) {
      this.props.onClick(item, index);
    }
  }

  public renderItem() {
    const classes = {
      'br-menu__item--small': this.props.small,
      'br-menu__item--large': this.props.large,
    };
    if (this.props.items instanceof Array) {
      return (
        this.props.items.map((item, index) =>
          <li
            key={index}
            className={
              classNames(`br-menu__item ${item.active ? 'br-menu__item--active' : ''}
              ${item.disabled ? 'br-menu__item--disabled' : ''}`, classes)}
            onClick={() => this.handleClick(item, index)}
          >
            {item.name}
          </li>));
    }
  }

  public render() {
    const classes = {
      'br-menu--small': this.props.small,
      'br-menu--large': this.props.large,
    };
    return (
      <ul
        className={classNames('br-menu', classes)}
      >
        {this.renderItem()}
      </ul>
    );
  }
}
